<script setup>



import FileUploadService from "@/service/impl/FileUploadService.js";
import {inject} from "vue";

const message = inject('message')
const prop = defineProps({
    description: {
        type: Object,
        default: () => {
            return {
                title: null,
                single: null,
                batch: null,
                prompt: null
            }
        }
    },
    data: {
        type: Object,
        default: () => {
            return {}
        }
    },
    allowedTypes: {
        type: Array,
        default: () => {
            return [
                'image/*',
                'video/*',
                'application/*',
                'text/*'
            ]
        }
    },
    tag: {
        type: Object,
        default: () => {
            return {
                id: null,
                path: null,
            }
        }
    },
    method: {
        type: String,
        default: () => {
            return null
        }
    }
})
const emits = defineEmits(['onCall'])


const uploadImage = (type) => {
    if(!prop.tag.id){
        message.warning("请选择要上传到的目标")
        return
    }
    const input = document.createElement('input');
    input.type = 'file';
    input.id = 'input-file';
    input.accept = prop.allowedTypes.join(",");
    document.getElementById("input-file").appendChild(input)
    if (type === 1) {
        input.onchange = (event) => {
            const file = event.target.files[0];
            if (file) {
                uploadSingleImage(file);
            }
        };
    } else if (type === 2) {
        input.multiple = true;
        input.onchange = (event) => {
            const files = event.target.files;
            if (files.length > 0) {
                uploadBatchImages(files);
            }
        };
    }
    input.click();
}


const uploadSingleImage = (file) => {
    // 这里可以添加上传逻辑，例如使用FormData和fetch或axios发送文件
    FileUploadService.uploadStrategy({
        file: file,
        path: prop.tag.path+'/'+prop.tag.id,
        class: prop.method,
        ...prop.data
    }).then(res => {
        message.success("上传成功")
        removeInput()
        emits('onCall')
    })
}

const uploadBatchImages = (files) => {
    // 这里可以添加上传逻辑，例如使用FormData和fetch或axios发送文件
    FileUploadService.uploadStrategyBatch({
        files: files,
        path: prop.tag.path+'/'+prop.tag.id,
        class: prop.method,
        ...prop.data
    }).then(res => {
        message.success("上传成功")
        removeInput()
        emits('onCall')
    })
}

const removeInput = () => {
    const inputElement = document.getElementById('input-file');
    inputElement.innerHTML = ''
}


</script>

<template>
    <el-dropdown split-button type="primary" style="margin-right: 12px">
        {{description.title}}
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item @click="uploadImage(1)">{{description.single}}</el-dropdown-item>
                <el-dropdown-item @click="uploadImage(2)">{{description.batch}}</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
    <div id="input-file" style="display: none"></div>
</template>

<style scoped lang="scss">

</style>